<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thylemeaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布二手汽车</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="css/indexCss.css">
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>

    <style>

        a:hover{text-decoration: none;}

        body {
            background: white;
        }

        .kd {
            width: 100px;
        }

        #more {
            position: absolute;
            background-color: #F8F8FF;
            width: 70%;
            left: 100px;
        }

        #moreDiv a {
            width: 120px;
            display: inline-block;
            font-family: "微软雅黑";
            font-size: 18px;
            text-align: center;
            color: black;
        }


        .preview {
            margin-top: 10px;
        }

        .preview img {
            width: 200px;
            height: 200px;
            margin: 5px;
        }

        #pox {
            position: relative;
            width: 120px;
            height: 120px;
            cursor: pointer;
            background-image: url("img/upload.gif");
        }

        #fileId {
            position: absolute;
            width: 120px;
            height: 120px;
            opacity: 0;
        / / 透明度为0 filter: alpha(opacity = 20);
        }

        #submitDiv {
            margin-top: 100px;

        }

        #submitBtn {
            position: relative;
            width: 100px;

        }

    </style>

</head>
<body>


<div th:replace="header::nav"></div>

<!-- --------------------------------------------------- -->


<div class="container">
    <div class="row">
        <div id="tb" class="col-lg-12">
            <blockquote class="layui-elem-quote" style="margin-top: 80px;margin-bottom: 40px;">
                汽车信息
            </blockquote>

            <div style="display:none; z-index:5" class="panel panel-default" id="more">
                <div class="panel-body" id="moreDiv">
                </div>
            </div>

            <form id="uploadform" method="post" enctype="multipart/form-data" width="50%">

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">标题
                            </button>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="title" id="title" placeholder="标题">
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">汽车信息
                            </button>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="message" id="message" placeholder="汽车信息">
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button id="showBrand" type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                汽车品牌 <span class="caret"></span>
                            </button>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="carBrandId" id="brandEdteText" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                汽车级别 <span class="caret"></span>
                            </button>
                            <ul id="showType" class="dropdown-menu">

                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="carTypeId" id="typeEdteText" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                车龄 <span class="caret"></span>
                            </button>
                            <ul id="shop1" class="dropdown-menu">
                                <li value="1"><a>1年内</a></li>
                                <li value="2"><a>2年内</a></li>
                                <li value="3"><a>3年内</a></li>
                                <li value="4"><a>3-5年</a></li>
                                <li value="4"><a>5-8年</a></li>
                                <li value="4"><a>8年以上</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="age" id="showEdteText1" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                里程 <span class="caret"></span>
                            </button>
                            <ul id="shop2" class="dropdown-menu">
                                <li value="1"><a>1万公里</a></li>
                                <li value="2"><a>3万公里</a></li>
                                <li value="3"><a>5万公里</a></li>
                                <li value="4"><a>10万公里</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="km" id="showEdteText2" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                排放标准 <span class="caret"></span>
                            </button>
                            <ul id="shop3" class="dropdown-menu">
                                <li value="1"><a>国一</a></li>
                                <li value="2"><a>国二</a></li>
                                <li value="3"><a>国三</a></li>
                                <li value="4"><a>国四</a></li>
                                <li value="4"><a>国五</a></li>
                                <li value="4"><a>国六</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="standard" id="showEdteText3" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                排量 <span class="caret"></span>
                            </button>
                            <ul id="shop4" class="dropdown-menu">
                                <li value="1"><a>1.0升以下</a></li>
                                <li value="2"><a>1.1-1.5升</a></li>
                                <li value="2"><a>1.6-2.0升</a></li>
                                <li value="2"><a>2.1-3.0升</a></li>
                                <li value="2"><a>3.1升以上</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="displacement" id="showEdteText4" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                变速箱 <span class="caret"></span>
                            </button>
                            <ul id="shop5" class="dropdown-menu">
                                <li value="1"><a>手动</a></li>
                                <li value="2"><a>自动</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="gearbox" id="showEdteText5" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                国别 <span class="caret"></span>
                            </button>
                            <ul id="shop6" class="dropdown-menu">
                                <li value="1"><a>中国</a></li>
                                <li value="2"><a>美国</a></li>
                                <li value="3"><a>日本</a></li>
                                <li value="4"><a>英国</a></li>
                                <li value="4"><a>加拿大</a></li>
                                <li value="4"><a>韩国</a></li>
                                <li value="4"><a>瑞士</a></li>
                                <li value="4"><a>墨西哥</a></li>
                                <li value="4"><a>法国</a></li>
                                <li value="4"><a>德国</a></li>
                                <li value="4"><a>澳大利亚</a></li>
                                <li value="4"><a>瑞典</a></li>
                                <li value="4"><a>巴西</a></li>
                                <li value="4"><a>意大利</a></li>

                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="country" id="showEdteText6" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                颜色 <span class="caret"></span>
                            </button>
                            <ul id="shop7" class="dropdown-menu">
                                <li value="1"><a>红色</a></li>
                                <li value="2"><a>黑色</a></li>
                                <li value="3"><a>白色</a></li>
                                <li value="4"><a>香槟色</a></li>
                                <li value="3"><a>银色</a></li>
                                <li value="3"><a>咖啡色</a></li>
                                <li value="3"><a>银灰色</a></li>
                                <li value="3"><a>紫色</a></li>
                                <li value="3"><a>黄色</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" name="colour" id="showEdteText7" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                能源<span class="caret"></span>
                            </button>
                            <ul id="shop8" class="dropdown-menu">
                                <li value="1"><a>汽油</a></li>
                                <li value="2"><a>柴油</a></li>
                                <li value="3"><a>油气混动</a></li>
                                <li value="4"><a>油电混动</a></li>
                                <li value="4"><a>纯电动</a></li>
                                <li value="4"><a>天然气</a></li>
                                <li value="4"><a>插电混动</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control" id="showEdteText8" name="capabilities" readonly='readonly'>
                </div>

                <hr/>

                <div class="input-group">
                    <div class="input-group-btn">
                        <!-- Single button -->
                        <div class="btn-group">
                            <button class="btn btn-default dropdown-toggle kd"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">价格
                            </button>
                        </div>
                    </div>
                    <input type="text" class="form-control" id="price" name="money" placeholder="0.00">
                </div>

                <hr/>

                <div id="pox">
                    <input type="file" multiple="true" name="multipartFiles" id="fileId"
                           onchange="showImg(this,'#previewId')"/>
                    <!-- mulitiple属性控制是否允许上传多个文件   onpropertychange="show()" onchange="show()" onfocus ="show()" -->
                </div>

            </form>

            <div class="preview" id="previewId">

            </div>


            <div id="submitDiv">
                <button class="btn btn-default" id="submitBtn">提交</button>
            </div>


        </div>
    </div>
</div>






</body>

<script type="text/javascript">


    $("#dis1")[0].style.display = "none";
    $("#dis2")[0].style.display = "none";

    /*
        给控件选择后把值赋给输入框
    */
    function eachShop(shop, edittext) {
        var $shop1 = $(shop);
        for (var i = 0; i < $shop1.length; i++) {
            $($shop1[i]).click(function () {
                $(edittext).val($(this).html())
            })
        }
    }


    /*
        检验价格
    */
    function checkPrice() {
        var regPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
        var price = $("#price").val();
        var flag = regPrice.test(price);
        if (flag) {
            $("#price").css("border", "1px solid green");
        } else {
            $("#price").css("border", "1px solid red");
        }
        return flag;
    }

    var formData = new FormData();


    /*
    	选择图片后，回调该方法
    */
    var count = 0;

    function showImg(fileObj, preview) {
        var file = fileObj.files[fileObj.files.length - 1];

        if(file.type.indexOf('image')!=-1){
            count++;
            formData.append('files', file);
            var fileReader = new FileReader(); //创建一个filereader对象
            var img = new Image();  //创建一个图片对象
            fileReader.readAsDataURL(file)  //读取所上传对的文件
            fileReader.onload = function () {
                img.src = this.result;   //读取完成后，赋值给img对象
                $(preview).append(img);  //添加到预览区域
            }
        }

    }


    $(function () {

        // 解决Ajax异步请求 springMvc 不跳转页面的问题
        $.ajaxSetup({
            //设置ajax请求结束后的执行动作
            complete:
                function (XMLHttpRequest, textStatus) {
                    // 通过XMLHttpRequest取得响应头，sessionstatus
                    var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
                    if (sessionstatus == "TIMEOUT") {
                        var win = window;
                        while (win != win.top) {
                            win = win.top;
                        }
                        win.location.href = XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                    }
                }
        });

        var user;

        $.ajax({
            // 编写json格式，设置属性和值
            url: "user/findUser",
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            type: "post",
            success: function (data) {
                user = data;
            }
        })


        $("#price").blur(checkPrice);

        //将隐藏的控件形式（车品牌）
        $("#showBrand").click(function () {
            $("#more")[0].style.display = "block";
        })

        //遍历8个控件
        for (var i = 1; i <= 8; i++) {
            eachShop("#shop" + i + " li a", "#showEdteText" + i);
        }


        /*
            相关的category
        */
        $.ajax({
            // 编写json格式，设置属性和值
            url: "category/beanBTC",
            contentType: "application/json;charset=UTF-8",
            data: '',
            dataType: "json",
            type: "post",
            success: function (data) {
                if (!data) {
                    alert("网络延迟，请刷新！")
                } else {
                    for (var i = 0; i < data.cateBrands.length; i++) {
                        $("#moreDiv").append("<a >" + data.cateBrands[i].name + "</a>");
                    }

                    var $brand = $("#moreDiv a");

                    for (var i = 0; i < $brand.length; i++) {
                        $($brand[i]).click(function () {
                            $("#brandEdteText").val($(this).html())
                            $("#more")[0].style.display = "none";
                        })
                    }

                    for (var i = 0; i < data.carTypes.length; i++) {
                        $("#showType").append('<li><a>' + data.carTypes[i].name + '</a></li>')
                    }
                    var $type = $("#showType li a");

                    for (var i = 0; i < $type.length; i++) {
                        $($type[i]).click(function () {
                            $("#typeEdteText").val($(this).html())
                        })
                    }

                }
            }
        });

        $("#submitBtn").click(function () {

            if($("#title").val()==""||$("#message").val()==""||$("#showEdteText1").val()==""||$("#showEdteText2").val()==""||$("#showEdteText3").val()==""
                ||$("#showEdteText4").val()==""||$("#showEdteText5").val()==""||$("#showEdteText6").val()==""||$("#showEdteText7").val()==""||$("#showEdteText8").val()==""
                ||$("#brandEdteText").val()==""||$("#typeEdteText").val()==""||$("#price").val()==""){
                alert("请完善信息！！")
                return;
            }

            if(count<3){
                alert("图片不少于三张");
                return;
            }

            var sendInfo = {
                title: $("#title").val(),
                message: $("#message").val(),
                userId: user.id,
                age: $("#showEdteText1").val(),
                km: $("#showEdteText2").val(),
                standard: $("#showEdteText3").val(),
                displacement: $("#showEdteText4").val(),
                gearbox: $("#showEdteText5").val(),
                country: $("#showEdteText6").val(),
                colour: $("#showEdteText7").val(),
                capabilities: $("#showEdteText8").val(),
                carBrand: $("#brandEdteText").val(),
                carType: $("#typeEdteText").val(),
                money: $("#price").val()
            }


            formData.append('jsonStr', JSON.stringify(sendInfo));


            //var formData = new FormData($("#uploadform")[0]);
            $("#submitBtn").attr("disabled",true);
            $.ajax({
                url: "announce/upload",
                type: "POST",
                secureuri: false,
                cache: false,    //上传文件不需缓存
                processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                data: formData,
                success: function (data) {
                    if (data != "") {
                        alert("上传成功，请等待管理员批准。")
                        window.location.href = "index02.html";
                    } else {
                        alert("文件上传失败。")
                    }
                    $("#submitBtn").attr("disabled",false);
                },
                error: function () {
                    alert("上传失败！请检查网络是否正常。");
                    $("#submitBtn").attr("disabled",false);
                }
            });

        })


    })

</script>

<script type="text/javascript" src="./layui/layui.all.js"></script>

</html>
